;(function($){
    "use strict"

    $.fn.banner = function(imgs, ops){
        const that = this;

        ops = ops ? ops : {}

        let {btns=true,list=true,autoPlay=true,delayTime=2000,moveTime=200,index=0} = ops;

        // 左右按钮功能的要离开的图片的索引
        let prev;
        
        // 1. 根据传入的数据进行图片结构渲染
        let str = "";
        imgs.forEach(val=>{
            str += `<img src="${val.src}" title="${val.title}" alt="${val.alt}" />`;
        })
        const pics = $("<div class='imgbox'>"+ str +"</div>").appendTo(this).children("img");
        pics.css("left",pics.eq(0).width()).eq(index).css("left",0);

        // 2. 根据用户传参实现左右按钮功能
        if(btns){
            // 创建左右按钮的页面结构，并添加事件
            $("<div class='btns'></div>").append($("<input type='button' value='<' id='left'>")).append($("<input type='button' value='>' id='right'>")).appendTo(this).children("#left").click(function(){   
                // 计算索引
                if(index === 0){
                    index = imgs.length-1;
                    prev = 0;
                }else{
                    index--;
                    prev = index+1;
                }
                // 根据索引运动图片
                move(-1, prev, index);
            }).end().children("#right").click(rightClick)
        }

        // 为了实现自动播放，将右按钮的事件处理函数，封装到外部
        function rightClick(){
            // 计算索引
            if(index === imgs.length-1){
                index = 0;
                prev = imgs.length-1;
            }else{
                index++;
                prev = index-1;
            }
            // 根据索引运动图片
            move(1, prev, index);
        }

        // 3. 根据用户传参实现分页器功能
        if(list){
            // 生成分页器的页面结构
            let str = "";
            imgs.forEach((val,idx)=>{
                str += `<span></span>`
            })
            // 设置分页器的默认样式，并给所有分页器绑定事件
            $('<div class="list">'+ str +'</div>').appendTo(this).children("span").eq(index).css({
                background:"red",
                color:"#fff"
            }).end().click(function(){
                // 点击的比当前显示的索引大
                if($(this).index() > index){
                    move(1, index, $(this).index());
                }
                // 点击的比当前显示的索引小
                if($(this).index() < index){
                    move(-1, index, $(this).index());
                }
                // 点击之后，将当前点击的索引，设置给下一次的要离开的索引
                index = $(this).index();
            })
        }

        function move(d, prev, now){
            // 运动图片
            pics.eq(prev).css({
                left: 0
            }).stop().animate({
                left: -pics.eq(0).width() * d
            }, moveTime).end().eq(now).css({
                left: pics.eq(0).width() * d
            }).stop().animate({
                left: 0
            }, moveTime)
            // 随着图片的运动，修改分页器的当前项
            that.find(".list").children("span").css({
                background:"",
                color:""
            }).eq(now).css({
                background:"red",
                color:"#fff"
            })
        }
        
        // 4. 根据用户传参实现自动播放功能
        if(autoPlay){
            // 开启自动播放
            let t = setInterval(() => {
                // 重复执行右按钮的事件处理函数
                rightClick()
            }, delayTime);

            // 鼠标进入，停止自动播放
            that.hover(function(){
                clearInterval(t)
                
            },function(){   // 鼠标离开，开启自动播放
                t = setInterval(() => {
                    rightClick()
                   
                }, delayTime);
            })
        }
    }

    $(".banner-wai").hover(function(){
        // console.log($("#left"))
        $("#left").css("display","block")
        $("#right").css("display","block")
    },function(){
        $("#left").css("display","none")
        $("#right").css("display","none")
    })

})(jQuery);
